<template>
    <div class="deliveryScan">
        <div class="nav">
            <div class="return" v-on:click="back()">
                <span class="arrow"></span>
                <span class="back">返回</span>
            </div>
            <div class="nav_text">
                <p>{{target_name}}</p>
            </div>
        </div>
        <div class="scan">
            <p>单据条形码：</p>
            <img src="./../../../static/img/4.png">
        </div>
        <div class="img">
            <input class="is_search" @keyup='change_inp($event)' v-model='inp_val' />
            <!-- @keyup='change_inp($event)' -->
        </div>
    </div>
</template>
<script>
export default {
  name: "deliveryScan",
  data() {
    return {
      target_name: "",
      link_for: "",
      inp_val: ""
    };
  },
  methods: {
    back: function() {
      let target_ = sessionStorage.getItem("target_");
      if (target_ == "supplier" || target_ == "returnScan") {
        this.$router.push({ path: "/ReturnNav" });
      } else {
        this.$router.push({ path: "/Nav" });
      }
    },
    link_: function() {
      //BA0601B000020001
      let this_ = this;
      sessionStorage.setItem("qrcode", this_.inp_val);
      setTimeout(function() {
        this_.$router.push({ path: `/${this_.link_for}` });
      }, 100);
    },
    change_inp: function(ev) {
      if (ev.keyCode == 13) {
        this.link_();
      }
    }
  },
  mounted() {
    let oInput = $(".is_search");
    oInput.focus();
  },
  created: function() {
    let target_ = sessionStorage.getItem("target_");
    switch (target_) {
      case "ck":
        this.target_name = "销售出库单扫描";
        this.link_for = "Delivery";
        break;
      case "rk":
        this.target_name = "采购入库单扫描";
        this.link_for = "warehouse";
        break;
      case "ll":
        this.target_name = "领料单扫描"; //这里没有用到
        this.link_for = "Material";
        break;
      case "kh":
        this.target_name = "客户收货确认";
        this.link_for = "Client";
        break;
      case "qtr":
        this.target_name = "补货单扫描";
        this.link_for = "otherWarehouse";
        break;
      case "supplier":
        this.target_name = "退货单扫描";
        this.link_for = "ReturnMenu2";
        // this.link_for = "ReturnSupplier";
        break;
      case "returnScan":
        this.target_name = "退货单扫描";
        this.link_for = "ReturnMenu2";
        // this.link_for = "OnlyReadGoods";
        break;
    }
  }
};
</script>
<style lang="css" scoped>
.is_search {
  width: 85%;
  height: 50px;
  border: 1px solid gray;
  padding: 10px;
  font-size: 20px;
  border-radius: 5px;
}

.scan {
  text-align: right;
  margin: 1.5rem;
}

.scan p {
  display: inline-block;
  font-size: 1.3rem;
  color: #49a1de;
}

.scan img {
  width: 2.5rem;
  padding-bottom: 0.5rem;
  vertical-align: middle;
}

.img img {
  width: 26rem;
}

.img {
  margin-top: 8rem;
  text-align: center;
}

.arrow {
  border: 0.15rem solid #fff;
  border-width: 0.15rem 0 0 0.15rem;
  display: inline-block;
  height: 0.85rem;
  width: 0.85rem;
  -webkit-transform-origin: center center;
  -webkit-transform: rotate(135deg);
  -webkit-transition: all 0.5s ease-in 0.1s;
  transform-origin: center center;
  transform: rotate(-45deg);
  transition: all 0.5s ease-in 0.1s;
}

.return {
  padding-left: 1.5rem;
  width: 44%;
}

.back {
  font-size: 1.3rem;
  color: #fff;
}

.nav {
  line-height: 4.7rem;
  display: -webkit-box;
  background: #668292;
  height: 4.7rem;
}

.nav_text {
  margin-left: -30px;
  font-size: 1.6rem;
  color: #fff;
}
</style>